<template>
    <input type="text" :id="pickerId" name="daterange" class="form-control date-picker" :disabled="disable" placeholder="{{placeholder}}" v-model="pickerValue" />
</template>
<style>

</style>
<script>

    export default {
        replace: true,
        props: {
            pickerValue:{
                twoWay: true,
                required: true
            },
            timePicker:{
                type: Boolean,
                default: function _default() {
                    return false;
                }
            },
            startDate: {
                required: false,
                default: function _default() {
                    return moment().subtract(29, 'days');
                }
            },
            endDate: {
                required: false,
                default: function _default() {
                    return moment();
                }
            },
            minDate: {
                required: false
            },
            maxDate: {
                required: false
            },
            applyClass: {
                type: String,
                required: false,
                default: "btn-success"
            },
            cancelClass: {
                type: String,
                required: false,
                default: "btn-default"
            },
            dateFormat: {
                type: String,
                required: false,
                default: "YYYY-MM-DD"
            },
            applyLabel: {
                type: String,
                required: false,
                default: "Apply"
            },
            cancelLabel: {
                type: String,
                required: false,
                default: "Cancel"
            },
            disable: {
                type: Boolean,
                required: false,
                default: false
            },
            placeholder: {
                type: String,
                required: false,
                default: ""
            }
        },
        data (){
            return {
                pickerId: this.uuid4()
            }
        },
        watch:{
            "pickerValue" (newVal, oldVal) {
                console.log(newVal, oldVal)
            }
        },
        ready (){

            $('#'+this.pickerId).daterangepicker({
                startDate:this.startDate,
                endDate:this.endDate,
                minDate:this.minDate,
                maxDate:this.maxDate,
                applyClass:this.applyClass,
                cancelClass:this.cancelClass,
                timePicker: this.timePicker,
                locale: {
                    format: this.dateFormat,
                    applyLabel: this.applyLabel,
                    cancelLabel: this.cancelLabel
                }
            });

        },
        methods:{
            uuid4 () {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8)
                    return v.toString(16)
                })
            }
        }
    }
</script>
